#new controls



<!--S:bootstrapcolumnsshowBS3-->

		<div class="boostrap-columns-show">
			<span class="sign sign-monitor"></span>
			<span class="text">{MAIN}</span>

			<span class="sign sign-laptop"></span>
			<span class="text">{DESKTOP}</span>

			<span class="sign sign-tablet"></span>
			<span class="text">{TABLET}</span>

			<span class="sign sign-mobile"></span>
			<span class="text">{PHONE}</span>
		</div>
			
<!--E:bootstrapcolumnsshowBS3-->

<!--S:bootstrapcolumnsBS3-->

		<div class="boostrap-columns">
			<div class="row">
				<div class="col-md-3 col-sm-6 col-xs-6">
					<select class="select" _data-width="100%" data-selected="{MAIN}" style="width:100%" name="{NAME}" id="{NAME}" data-placeholder="≥1200">
						<option value=""></option>
						{OPTIONS}
					</select>
				</div>

				<div class="col-md-3 col-sm-6 col-xs-6">
					<select class="select" _data-width="100%" data-selected="{DESKTOP}" style="width:100%" name="{NAME}_desktop" id="{NAME}_desktop" data-placeholder="≥992">
						<option value=""></option>
						{OPTIONS}
					</select>
				</div>

				<div class="col-md-3 col-sm-6 col-xs-6">
					<select class="select" _data-width="100%" data-selected="{TABLET}" style="width:100%" name="{NAME}_tablet" id="{NAME}_tablet" data-placeholder="≥768">
						<option value=""></option>
						{OPTIONS}
					</select>
				</div>

				<div class="col-md-3 col-sm-6 col-xs-6">
					<select class="select" _data-width="100%" data-selected="{PHONE}" style="width:100%" name="{NAME}_phone" id="{NAME}_phone" data-placeholder="<768">
						<option value=""></option>
						{OPTIONS}
					</select>
				</div>
			</div>	
		</div>			
<!--E:bootstrapcolumnsBS3-->


<!--S:bootstrapcolumnsshow-->

		<div class="boostrap-columns-show">
			<span class="sign sign-monitor"></span>
			<span class="text">{MAIN}</span>

			<span class="sign sign-laptop"></span>
			<span class="text">{LG}</span>

			<span class="sign sign-tablet"></span>
			<span class="text">{MD}</span>

			<span class="sign sign-tablet"></span>
			<span class="text">{SM}</span>

			<span class="sign sign-mobile"></span>
			<span class="text">{XS}</span>
		</div>
			
<!--E:bootstrapcolumnsshow-->

<!--S:bootstrapcolumns-->

		<div class="boostrap-columns">
			<div class="row">
				<div class="col-lg-1-5 col-md-4 col-sm-6 col-xs-6">
					<select class="select" _data-width="100%" data-selected="{MAIN}" style="width:100%" name="{NAME}" id="{NAME}" data-placeholder="≥1200">
						<option value=""></option>
						{OPTIONS}
					</select>
				</div>

				<div class="col-lg-1-5 col-md-4 col-sm-6 col-xs-6">
					<select class="select" _data-width="100%" data-selected="{LG}" style="width:100%" name="{NAME}_lg" id="{NAME}_lg" data-placeholder="≥992">
						<option value=""></option>
						{OPTIONS}
					</select>
				</div>

				<div class="col-lg-1-5 col-md-4 col-sm-6 col-xs-6">
					<select class="select" _data-width="100%" data-selected="{MD}" style="width:100%" name="{NAME}_md" id="{NAME}_md" data-placeholder="≥768">
						<option value=""></option>
						{OPTIONS}
					</select>
				</div>

				<div class="col-lg-1-5 col-md-4 col-sm-6 col-xs-6">
					<select class="select" _data-width="100%" data-selected="{SM}" style="width:100%" name="{NAME}_sm" id="{NAME}_sm" data-placeholder="≥576">
						<option value=""></option>
						{OPTIONS}
					</select>
				</div>

				<div class="col-lg-1-5 col-md-4 col-sm-6 col-xs-6">
					<select class="select" _data-width="100%" data-selected="{XS}" style="width:100%" name="{NAME}_xs" id="{NAME}_xs" data-placeholder="<576">
						<option value=""></option>
						{OPTIONS}
					</select>
				</div>
			</div>	
		</div>			
<!--E:bootstrapcolumns-->

<!--S:bootstrapcolumnsoption-->
	<option value="{VALUE}">{TITLE}</option>
<!--E:bootstrapcolumnsoption-->


<!--S:Border-->
						{_TEMPLATE_DATA}
<!--E:Border-->

<!--S:Action-->
	<form action="{ACTION}" method="{METHOD}" {ID} name="{NAME}" enctype="{ENCODING}">
		<input type="hidden" name="forms.core.images.process" id="forms.core.images.process" />
		{_TEMPLATE_DATA}
	</form>
<!--E:Action-->

<!--S:TitleText-->
							<h3><span class="sign icon-list_nested"></span>{TITLE}</h3>
<!--E:TitleText-->

<!--S:TitleMenu-->
							<div class="widget-title-drop">
								<a href="#" class="dropdown-toggle" data-toggle="dropdown">																
									{ICON}{SUBTITLE}
									<span class="caret"></span>
								</a>
								{ITEMS}
							</div> 
							{DETAILS}
<!--E:TitleMenu-->

<!--S:TitleMenuSubtitle-->
							<h3>{SUBTITLE}</h3>
<!--E:TitleMenuSubtitle-->


<!--S:TitleMenuGroup-->
								<ul class="dropdown-menu" role="menu">
									{DATA}
								</ul>

<!--E:TitleMenuGroup-->

<!--S:TitleMenuElement-->
									<li><a href="{LINK}" {ACTIVE}>{ICON}{TITLE}</a></li>
<!--E:TitleMenuElement-->

<!--S:TitleMenuActive-->class="active"<!--E:TitleMenuActive-->

<!--S:TitleMenuIcon--><span class="icon sign-{ICON}"></span><!--E:TitleMenuIcon-->



<!--S:Form-->

						{_PRE_HTML}
						{_PRE_JAVASCRIPT}
						
						{_PRE_TABS}
						{_MIDDLE_HTML}
						{_PRE_FORM}


					<div class="widget widget-form-main widget-main {SKIN}">
						<div class="widget-head">								
							{_TITLE}
							{_HEADER_BUTTONS}
						</div>
						<div class="widget-form">
							{_LANGUAGE_DATA}

							{_ERROR}
							{_TEMPLATE_DATA}
							{_FOOTER_BUTTONS}
							{_AFTER_FORM1}
						</div>
					</div>

						{_AFTER_FORM2}
						{_AFTER_JAVASCRIPT}
						{_AFTER_HTML}


<!--E:Form--> 

<!--S:FormNoTitle-->

						{_PRE_HTML}
						{_PRE_JAVASCRIPT}
						
						{_PRE_TABS}
						{_MIDDLE_HTML}
						{_PRE_FORM}


					<div>
						<div class="widget-form">
							{_LANGUAGE_DATA}

							{_ERROR}
							{_TEMPLATE_DATA}
							{_FOOTER_BUTTONS}
							{_AFTER_FORM1}
						</div>
					</div>

						{_AFTER_FORM2}
						{_AFTER_JAVASCRIPT}
						{_AFTER_HTML}

<!--E:FormNoTitle--> 


<!--S:Error-->
							<div class="noteSmall nError nIconError noround nbr nbl">
									<span class="nIcon"></span>
									<h3>{ERROR}</h3>
							</div>
<!--E:Error-->

<!--S:HeaderButtons-->
									<div class="options">
										<ul>
											{BUTTONS}
										</ul>
									</div>
<!--E:HeaderButtons-->

<!--S:FooterButtons-->
							<div class="formLine footerButtons buttons" id="XML_BODY_FIELD_footer_buttons">
									<div class="options">
										<ul>
											{BUTTONS}
										</ul>
									</div>

									<div class="clear"></div>
							</div>
<!--E:FooterButtons-->

<!--S:Button-->
										<li><a href="{LOCATION}" onclick="{ONCLICK}" target="{TARGET}" onmouseover="{ONMOUSEOVER}" onmouseout="{ONMOUSEOUT}">{ICON}{TITLE}</a></li>
<!--E:Button-->

<!--S:ButtonSubmit-->
										<li><button type="submit">{ICON}{TITLE}</button></li>
<!--E:ButtonSubmit-->

<!--S:ButtonPopup-->
										<li><a data-toggle="modal" data-target="#popup" href="{LOCATION}" onclick="{ONCLICK}" onmouseover="{ONMOUSEOVER}" onmouseout="{ONMOUSEOUT}">{ICON}{TITLE}</a></li>
<!--E:ButtonPopup-->


<!--S:ButtonIcon--><span class="ico sign-{ICON}"></span><!--E:ButtonIcon-->

<!--S:ElementRTL-->
							<div class="formLine" id="XML_BODY_FIELD_{NAME}">
								<div class="col-sm-9 ar" dir="rtl">{_PREFFIX}{_ELEMENT}{_SUFFIX}
									{_DESCRIPTION}
								</div>					
								<div class="col-sm-3 ar"><label {_REQUIRED_ERROR} dir="rtl">{LANG_DATA}{TITLE}{_REQUIRED}{_END_CHAR}</label></div>
								<div class="clear"></div>
							</div>
<!--E:ElementRTL-->

								<div class="col-lg-2 col-md-3 col-sm-3 col-xs-4"><label {_REQUIRED_ERROR}>{LANG_DATA}{TITLE}{_REQUIRED}{_END_CHAR}</label></div>
								<div class="col-lg-10 col-md-9 col-sm-9 col-xs-8">{_PREFFIX}{_ELEMENT}{_SUFFIX}

<!--S:Element-->
							<div class="formLine" id="XML_BODY_FIELD_{NAME}">
								<div class="formLine-label"><label {_REQUIRED_ERROR}>{LANG_DATA}{TITLE}{_REQUIRED}{_END_CHAR}</label></div>
								<div class="formLine-content">
									<div class="formLine-content-inner">
										{_ELEMENT}
									</div>	
									{_DESCRIPTION}
								</div>
							</div>

							{_EXTRA_CODE}
<!--E:Element-->

<!--S:ElementInner-->
								<div class="formLine-element {TYPE}" data-width="{WIDTH}">
									<div class="formLine-element-content">
										{_PREFIX}
										<div class="formLine-element-holder">										
											{_ELEMENT}
										</div>
										{_SUFFIX}
									</div>
								</div>
<!--E:ElementInner-->


								<div class="col-md-3"><label {_REQUIRED_ERROR}>{LANG_DATA}{TITLE}{_REQUIRED}{_END_CHAR}</label></div>
								<div class="col-md-9 clearfix">
									<span class="form_preffix">{_PREFIX}</span>
									{_ELEMENT}
									<span class="form_suffix">{_SUFFIX}</span>

									{_DESCRIPTION}
								</div>					


<!--S:ExtendElementTitle-->
								<div class="formLine-label"><label {_REQUIRED_ERROR}>{LANG_DATA}{TITLE}{_REQUIRED}{_END_CHAR}</label></div>
<!--E:ExtendElementTitle-->

<!--S:ExtendElement-->
							<div class="formLine formLine-extended" id="XML_BODY_FIELD_{NAME}">
								{ELEMENT_TITLE}
								
								<div class="formLine-content">
									<div class="formLine-content-inner">
										{_ELEMENT}
									</div>	
									{_DESCRIPTION}
									{_EXTRA_CODE}
								</div>
							</div>
<!--E:ExtendElement-->

<!--S:Minititle-->
						</div>
					</div>

					<div class="widget widget-mini {SKIN} {COLLAPSED}" id="widget_{NAME}">
						<div class="widget-head" id="XML_BODY_FIELD_{NAME}">								
							<h3><span class="sign icon-list_nested"></span> {LANG_DATA} {TITLE}</h3>							
						</div>
						<div class="widget-form">
<!--E:Minititle-->

<!--S:Subtitle-->
						</div>
					</div>

					<div class="widget widget-main {SKIN} {COLLAPSED}" id="widget_{NAME}">
						<div class="widget-head" id="XML_BODY_FIELD_{NAME}">								
							<h3><span class="sign icon-list_nested"></span> {LANG_DATA} {TITLE}</h3>							
						</div>
						<div class="widget-form">
<!--E:Subtitle-->

<!--S:Comment-->

							<div class="noteSmall nInfo form-comment" id="XML_BODY_FIELD_{NAME}">
									<span class="sign sign-info"></span>
									<h3>{COMMENT}</h3>
							</div>
<!--E:Comment-->

<!--S:ElementHelpTopic-->
<script>draw_button("topichelp" , "javascript:void(XMLFormsPopup('{LOCATION}'));" , "" , "" , "" , "" , "");</script>
<!--E:ElementHelpTopic>

<!--S:ElementMultiple-->
	<table border="0" width="100%" cellpadding="3" cellspacing="0">
		<tr>
			<td height="23" style="padding-top:5px" valign=top width=150 class="border-tr" align="right">{_REQUIRED_ERROR}{TITLE}{_REQUIRED}:</td>
			<td class="border-t" style="padding:0px">
				<table width=100% cellspacing=0 cellpadding=3>
					{_ELEMENT}
				</table>
			</td>
		</tr>
	</table>
	{_EXTRA_CODE}
<!--E:ElementMultiple-->

<!--S:ElementMultipleBody-->
					<tr>
						<td class="border-t">
							<table cellspacing=0 cellpadding=0>
								<tr>
									<td>{_PREFFIX}</td><td>{_ELEMENT}</td><td>{_SUFFIX}</td>
								</tr>
							</table>
						</td>
					</tr>
					{_DESCRIPTION}
<!--E:ElementMultipleBody-->

<!--S:ElementPrefix--><div class="formLine-prefix"><span>{PREFFIX}</span></div><!--E:ElementPrefix-->
<!--S:ElementSuffix--><div class="formLine-suffix"><span>{SUFFIX}</span></div><!--E:ElementSuffix-->

<!--S:RequiredMark-->*<!--E:RequiredMark-->

<!--S:Required-->style="color: #e74c3c;"<!--E:Required-->
	
<!--S:Description-->	
									<div class="clear"></div>
									<div class="formInfo">
										{DESCRIPTION}
									</div>
<!--E:Description-->

<!--S:textarea-->
		<textarea _data-width="{WIDTH}"  class="FormItemTextarea" {STYLE} id="{NAME}"  name="{NAME}" rows="{_ROWS}" cols="{_COLS}" dir="{DIR}">{VALUE}</textarea>
<!--E:textarea-->


<!--S:iframe-->
	{LOADING}
	<iframe class="formIframe" name="{NAME}" height="{HEIGHT}" src="{SRC}"></iframe>
<!--E:iframe-->

<!--S:iframe_loading-->
		<div class="noteSmall nWarning nIconWarning noround nbr nbl iframe_loading">
			<span class="nIcon"></span>
			<h3 class="al">Loading, please wait ...</h3>
		</div>
<!--E:iframe_loading-->


<!--S:htmlareainit-->

<!--E:htmlareainit-->

<!--S:htmlarea-->
<textarea id="{NAME}" class="ckeditor" name="{NAME}" dir="{DIR}">{VALUE}</textarea>

<script type="text/javascript">
/*$( document ).ready( function() {
	$( '#{NAME}' ).ckeditor(
		contentsLangDirection : '{DIR}',
		width : "100%",
		height : "{HEIGHT}px"	
	);
} );
*/
CKEDITOR.replace( '{NAME}',
    {
		fullPage : {FULLPAGE} , 
		contentsLangDirection : '{DIR}',
		width : "100%",
		height : "{HEIGHT}px",
		extraAllowedContent:  'img[alt,border,width,height,align,vspace,hspace,!src];' 
//		on : { 'instanceReady' : configureHtmlOutput }
	}
);

 CKEDITOR.config.allowedContent = true; 

</script>



<!--E:htmlarea-->


<!--S:textbox-->
			<input _data-width="{WIDTH}" {HANDLERS} {STYLE} {_MASK} class="FormItemTextbox" type="text" id="{NAME}" name="{NAME}" size="{_SIZE}" maxlength="{_MAXLENGTH}" value="{VALUE}" dir="{DIR}">			
<!--E:textbox-->

<!--S:vardump-->
	<pre class="vardump" style="height: {HEIGHT}px!important">{VALUE}</pre>
<!--E:vardump-->

<!--S:colorpickerdisabled-->
	<div class="colorpickershow" style="background-color: {VALUE};"><span>{VALUE}</span></div>
<!--E:colorpickerdisabled-->


<!--S:colorpicker-->

		<div _data-width="{WIDTH}" class="colorpicker-field">
			<input {HANDLERS} {STYLE} id="cp_{NAME}" class="FormItemTextbox" type="text" name="{NAME}" size="{_SIZE}" maxlength="{_MAXLENGTH}" value="{VALUE}">
			<script>
				$(function() {
					$('#cp_{NAME}').colorpicker({
						parts:  [   
							'header', 
							'map', 
							'bar', 
							'hex',
							'hsv', 
							'rgb', 
							//'alpha', 
							'preview',
							//'swatches', 
							'footer'
						],
						showOn: 'both',
						buttonColorize: true,
						showNoneButton: true,
						alpha: false,
						colorFormat: '#HEX'
					});
				});
			</script>
		</div>

		<style>
		/*
		#cp_{NAME} {
			background-color:#{VALUE};
			color:#{VALUE};
			line-height:20px;
		}*/
		</style>
<!--E:colorpicker-->

<!--S:cc-->
				<input class="FormItemTextbox" type="text" name="{NAME}_arr[1]" size="4" maxlength="4" value="{VALUE_GROUP_1}">
				<input class="FormItemTextbox" type="text" name="{NAME}_arr[2]" size="4" maxlength="4" value="{VALUE_GROUP_2}">
				<input class="FormItemTextbox" type="text" name="{NAME}_arr[3]" size="4" maxlength="4" value="{VALUE_GROUP_3}">
				<input class="FormItemTextbox" type="text" name="{NAME}_arr[4]" size="4" maxlength="4" value="{VALUE_GROUP_4}">
<!--E:cc-->

<!--S:cc_show-->
				{VALUE_GROUP_1}-{VALUE_GROUP_2}-{VALUE_GROUP_3}-{VALUE_GROUP_4}
<!--E:cc_show-->

<!--S:button-->		
		<a class="button button-form {COLOR}" id="{NAME}" href="{LOCATION}" onclick="{ONCLICK}" onmouseover="{ONMOUSEOVER}" target="{TARGET}"><span class="ico sign-{BUTTON}"></span>{LABEL}</a>
<!--E:button-->

<!--S:submit-->		
		<button class="button {COLOR}" onclick="{ONCLICK}" onmouseover="{ONMOUSEOVER}"><span class="ico sign-{BUTTON}"></span>{LABEL}</button>
<!--E:submit-->

<!--S:imgCheck-->
				<table cellspacing="0" cellpadding="0">
					<tr>
						<td>
							<img class="FormItemImgCheck" src="{SRC}" />
						</td>						
					</tr>
					<tr>
						<td height="5"></td>
					<tr>
						<td><input class="FormItemTextbox" type="text" name="{NAME}" size="8" maxlength="8">
				</table>
<!--E:imgCheck-->

<!--S:password-->
			<input {HANDLERS} {STYLE} class="FormItemTextbox" type="password" id="{NAME}" name="{NAME}" size="{_SIZE}" maxlength="{_MAXLENGTH}" value="{VALUE}" dir="{DIR}" {WIDTH}>
<!--E:password-->

<!--S:password_show-->
						<td><img src="images/dot.gif" width="3" height="0" /><script>draw_button("showpassword" , "javascript:void(0)" , "" , "Stay over to see / edit the password" , "javascript:ShowPassword(document.getElementById('{NAME}') , document.getElementById('{NAME}_text'))" , "javascript: HidePassword(document.getElementById('{NAME}') , document.getElementById('{NAME}_text'))");</script></td>
<!--E:password_show-->

<!--S:file-->
				<div class="fileupload-holder">
					<input {HANDLERS} type="file" name="{NAME}" size="{_SIZE}">
					<span class="fileupload"></span>
				</div>
<!--E:file-->

<!--S:hidden-->
				<input {HANDLERS} type="hidden" name="{NAME}" value="{VALUE}">
<!--E:hidden-->

<!--S:checkbox-->
					<label class="checkbox single">
						<input id="{NAME}" name="{NAME}" type="checkbox" class="check" value="{VALUE}" {CHECKED}{DISABLED} {HANDLERS}>
						<span class="sign sign-checkbox-unchecked"></span><span class="sign sign-checkbox-checked"></span>
						{LABEL}
					</label>
<!--E:checkbox-->

<!--S:checkbox_details-->
					{VALUE}	
					<label class="checkbox single" style="display: none">
						<input id="{NAME}" type="checkbox" class="check" value="{VALUE}" {CHECKED}{DISABLED} {HANDLERS}>
						<span class="sign sign-checkbox-unchecked"></span><span class="sign sign-checkbox-checked"></span>
						{LABEL}
					</label>
<!--E:checkbox_details-->

<!--S:checkbox_show-->
				<table cellspacing=0 cellpadding=0>
					<tr>
						<td>
							<img src="assets/images/checkbox_{CHECK}.gif"/>
						</td>
						<td width=3></td>
						<td>
							{LABEL}
						</td>
					</tr>
				</table>
<!--E:checkbox_show-->


<!--S:SelectDisabled-->
	{VALUE}
	<select style="display: none" id="{NAME}" class="notchosen" default="{VALUE_ORIGINAL}">
		<option value="{VALUE_ORIGINAL}" selected>{VALUE_ORIGINAL}</option>
	</select>
<!--E:SelectDisabled-->

<!--S:RadioDisabled-->
	{VALUE}
	<input id="{NAME}_{VALUE_ORIGINAL}" name="{NAME}" type="radio" value="{VALUE_ORIGINAL}" checked="checked" style="display: none" />
<!--E:RadioDisabled-->


<!--S:Select-->
				<select class="{CLASS} {SORTABLE}" _data-width="{_data-width}" style="{STYLE}" {HANDLERS} size="{SIZE}" {MULTIPLE} name="{NAME}" id="{NAME}" {DISABLED} placeholder="{PLACEHOLDER}">
					{OPTIONS}
				</select>
<!--E:Select-->

<!--S:SelectOption-->
				<option value="{VALUE}"	{CHECKED}{DISABLED}>{LABEL}</option>
<!--E:SelectOption-->

<!--S:RC-Inline-->-inline<!--E:RC-Inline-->

<!--S:Radio-->
			<div class="radiolist">
			{OPTIONS}
			</div>
<!--E:Radio-->

<!--S:RadioOption-->
					<label class="radio{INLINE-CLASS}">
						<input id="{NAME}_{VALUE}" name="{NAME}" type="radio" value="{VALUE}" {CHECKED}{DISABLED} {HANDLERS}>
						<span class="sign sign-radio-unchecked"></span><span class="sign sign-radio-checked"></span>
						{LABEL}
					</label>
<!--E:RadioOption-->



<!--S:CheckBox-->	
			<div class="checklist">
			{OPTIONS}
			</div>
<!--E:CheckBox-->

<!--S:CheckBoxOption-->
					<label class="checkbox{INLINE-CLASS}">
						<input id="{NAME_ORIGINAL}_{VALUE}" name="{NAME}" type="checkbox" class="check" value="{VALUE}" {CHECKED}{DISABLED} {HANDLERS}>
						<span class="sign sign-checkbox-unchecked"></span><span class="sign sign-checkbox-checked"></span>

						{LABEL}
					</label>
<!--E:CheckBoxOption-->


<!--S:SelectDiv-->
			<div style="overflow:scroll;background:#ffffff;width:{WIDTH};height:{HEIGHT};">
				{SELECT_DATA}
			</div>
<!--E:SelectDiv-->

<!--S:DateSelect-->
				<select class="FormItemSelect" name="{NAME}" style="width: {WIDTH}" {DISABLED}>
					{OPTIONS}
				</select>
<!--E:DateSelect-->

<!--S:DateSelectOption-->
				<option value="{VALUE}"	{SELECTED}>{NAME}</option>
<!--E:DateSelectOption-->

<!--S:selectempty-->
				No options avaible.
<!--E:selectempty-->

<!--S:text--><span class="form-text">{VALUE}</span><!--E:text-->
<!--S:html--><div class="generic-text nc">{VALUE}</div><!--E:html-->

<!--S:htmlfield--><div class="html-field">{VALUE}</div><!--E:htmlfield-->

<!--S:text_iframe-->
				<iframe style="width:100%;" id="frame_{NAME}" src='about:blank'></iframe>
				<textarea style="display: none;" id="text_{NAME}">{VALUE}</textarea>

				<script>	
					$(document).ready(function() {

						var $iframe = $('#frame_{NAME}');
						$iframe.ready(function() {
							$iframe.contents().find("body").append($("#text_{NAME}").val());

							$("#frame_{NAME}").css("height" ,  (document.getElementById('frame_{NAME}').contentWindow.document.body.scrollHeight + 35) + 'px');

						});
					});
				</script>
<!--E:text_iframe-->


<!--S:image-->
		{PREVIEW}
		{EDITABLE}
<!--E:image-->

<!--S:imageshow-->
				<div class="image-editor display-only">
					<div class="image-preview preview_{NAME} clearfix" data-width="{CROP_WIDTH}" data-height="{CROP_HEIGHT}" data-field="{NAME}" data-crop="{CROP_OXBC}">
					
						<div class="image-holder old">
							<div class="old-image" data-src="{SRC}"></div>
						</div>
					</div>
				</div>
<!--E:imageshow-->

<!--S:fileshow-->
				<div class="file-uploader display-only">
					<div class="file-preview preview_{NAME} clearfix" data-field="{NAME}" data-file="" data-allowed="{ALLOWED}">


						<div class="files content" >
							<div class="file file-old" data-file="{FILE_NAME}" data-download="{FILE_DOWNLOAD}">
								<!--<span class="title"><span>Current File</span>	<span></span></span>-->
								<a href="" class="file-name"></a>								

							</div>

						</div>

				
					</div>

					<div class="clear"></div>
				</div>


<!--E:fileshow-->

<!--S:imageshowtable-->
	<a href="{SRC}" rel="prettyPhoto['list']"><img border="{BORDER}" {HEIGHT} title="Click to view enlarged image..." width="{WIDTH}" src="{SRC}"></a>
<!--E:imageshowtable-->

<!--S:imageshownolink-->
	<img width="{WIDTH}" {HEIGHT} border="{BORDER}" title="No image avaible" src="{SRC}">
<!--E:imageshownolink-->


<!--S:imageedit-->
				<input type="hidden" name="{NAME}_temp" id="{NAME}_temp" value="{TEMP}">
				<input type="hidden" name="{NAME}_temp_file" id="{NAME}_temp_file" value="{PREVIOUS_FILE_NAME}">
				<input type="hidden" name="{NAME}_radio_type" id="{NAME}_radio_type" value="0">				
				<input type="hidden" name="{NAME}_crop_oxbc" id="{NAME}_crop_oxbc" value="{CROP_OXBC}">

				<div class="image-editor">

					<div class="image-preview preview_{NAME} clearfix" data-width="{CROP_WIDTH}" data-height="{CROP_HEIGHT}" data-field="{NAME}" data-crop="{CROP_OXBC}">
						<div class="image-buttons">
							<a href="" class="button Red disabled delete-old"><span>Delete Current Image</span></a>

							<a href="" class="button Red disabled delete-new"><span>Delete New Image</span></a>


							<div class="custom-upload-button">								
								<input data-name="{NAME}" data-preview=".preview_{NAME}" data-progress=".progress_{NAME}" data-url=""  class="no-uniform html-file-upload" type="file" name="files">
								<span class="button Green"><span>Upload New Image</span></span>
							</div>

							<div class="progress-holder progress_{NAME}">
								<div class="status"></div>
							</div>

							<div class="form-fields clearfix">
								<input type="text" placeholder="[ ALT attribute]" name="{NAME}_alt" value="{ALT_VALUE}" class="image-alt-field {ALT_HIDDEN}"/>
							</div>

						</div>

						<div class="image-holder old">
							<div class="old-image" data-src="{SRC}"></div>
						</div>

						<div class="clear"></div>

						<div class="image-holder new">
							<div class="new-image">
								<div class="new-image-container"></div>
							</div>
						</div>					
						<div class="clear"></div>

					</div>
				</div>

<!--E:imageedit-->

<!--S:uploadedit-->

				<div class="file-uploader">
					<div class="file-preview preview_{NAME} clearfix" data-field="{NAME}" data-file="" data-allowed="{ALLOWED}">

						<input type="hidden" name="{NAME}_temp" id="{NAME}_temp" value="{TEMP}">
						<input type="hidden" name="{NAME}_temp_file" id="{NAME}_temp_file" value="{PREVIOUS_FILE_NAME}">
						<input type="hidden" name="{NAME}_file" id="{NAME}_file" value="{FILE_NAME}">
						<input type="hidden" name="{NAME}_radio_type" id="{NAME}_radio_type" value="0">

						<div class="file-buttons">
							<a href="" class="button Red disabled delete-old"><span>Delete Current File</span></a>

							<a href="" class="button Red disabled delete-new"><span>Delete New File</span></a>

							<div class="custom-upload-button">								
								<input data-name="{NAME}" data-preview=".preview_{NAME}" data-progress=".progress_{NAME}" data-url=""  class="no-uniform html-file-upload" type="file" name="files">
								<span class="button Green"><span>Upload New File</span></span>
							</div>

							<div class="progress-holder progress_{NAME}">
								<div class="status"></div>
							</div>
						</div>

						<div class="files content" >
							<div class="file file-old" data-file="{FILE_NAME}" data-download="{FILE_DOWNLOAD}">
								<span class="title"><span>Current File</span>	<span></span></span>
								<a href="" class="file-name"></a>								

							</div>

							<div class="file file-new">
								<span class="title"><span>New File</span>	<span></span></span>
								<span class="file-name"></span>
								<span class="file-size"></span>
							</div>

						</div>

				
					</div>

					<div class="clear"></div>
				</div>
<!--E:uploadedit-->

<!--S:autocomplete-->
			<div class="component-mt-select line" unselectable='on'
				  data-value="{VALUE}"
				  data-mt-close-on-select="1"
				  data-mt-clear-on-select="1"
				  data-mt-tag-input-name="{NAME}"
				  data-mt-max-tags="{MAX}"
				  data-mt-request-method="GET"
				  data-mt-request-url="{SCRIPT}">

				<input type="text" data-mt-filter-control>
			</div>
<!--E:autocomplete-->



<!--S:namesortGroup-->{DATA}<!--E:namesortGroup-->
<!--S:namesortElement--><a href="{LINK}">{NAME}</a> <!--E:namesortElement-->

<!--S:calendar-->
            <div class="form-group form-calendar" style="margin-bottom: 0px;">
                <div class='input-group date' id='calendar_{NAME}'>
                    <input type='text' class="form-control" id="field_{NAME}" name="{NAME}" readonly value="{VALUE}" {HANDLERS} {STYLE} data-format="{PARAMS}"/>
                    <span class="input-group-addon">
						<span class="glyphicon glyphicon-calendar"></span>
						<span class="glyphicon glyphicon-ok"></span>
					</span>
                </div>
            </div>

			<script type="text/javascript">
				$(document).ready(function() { 	
					$('#calendar_{NAME}').datetimepicker({
							{_START}				            
							{_END}
							defaultDate: parseInt("{VALUE}") > 1000 ? moment("{VALUE}") : "",
							pickTime	: {TIME},
							useSeconds : false
					});
				});
			</script>
<!--E:calendar-->

<!--S:calendar_range-->
            <div class="form-group form-calendar row" style="margin-bottom: 0px;">
				<div class="col-sm-6 form-calendar">
					<div class='input-group date' id='calendar_{NAME}_start'>
						<input type='text' class="form-control" id="field_{NAME}_start" name="{NAME}_start" value="{VALUE_START}" {HANDLERS} data-format="{PARAMS}"/>
						<span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
					</div>
				</div>

				<div class="col-sm-6 form-calendar">
					<div class='input-group date' id='calendar_{NAME}_end'>
						<input type='text' class="form-control" id="field_{NAME}_end" name="{NAME}_end" value="{VALUE_END}" {HANDLERS} data-format="{PARAMS}"/>
						<span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
					</div>
				</div>

            </div>

			<script type="text/javascript">
				$(document).ready(function() { 	

					var nowTemp = new Date();
					var now = new Date(nowTemp.getFullYear(), nowTemp.getMonth(), nowTemp.getDate(), 0, 0, 0, 0);

					var __{NAME}_start = $('#calendar_{NAME}_start').datetimepicker({
							defaultDate: moment("{VALUE_START}"),
							pickTime	: {TIME},
							useSeconds : false

					}).on(
						'change.dp' , 
						function(e) {
							$('#calendar_{NAME}_end').data("DateTimePicker").setStartDate(e.date);
						}
					);

					var __{NAME}_end = $('#calendar_{NAME}_end').datetimepicker({
							defaultDate: moment("{VALUE_END}"),
							pickTime	: {TIME},
							useSeconds : false

					}).on(
						'change.dp',
						function( e) {
							$('#calendar_{NAME}_start').data("DateTimePicker").setEndDate(e.date);
					});

				});
			</script>
<!--E:calendar_range-->


<!--S:calendar_start-->startDate: moment({ y: "{START}" }), <!--E:calendar_start-->
<!--S:calendar_end-->endDate: moment({ y: "{END}" }), <!--E:calendar_end-->


<!--S:time-->
            <div class="form-group" style="margin-bottom: 0px;">
                <div class='input-group date' id='calendar_{NAME}'>
                    <input type='text' class="form-control" id="field_{NAME}" name="{NAME}" readonly value="{VALUE}" {HANDLERS} {STYLE} data-format="{PARAMS}"/>
                    <span class="input-group-addon"><span class="glyphicon glyphicon-time"></span></span>
                </div>
            </div>

			<script type="text/javascript">
				$(function () {
					$('#calendar_{NAME}').datetimepicker({
							pickDate	: false,
							defaultDate : "{VALUE}",
							useSeconds : true
					});
				});
			</script>
<!--E:time-->


<!--S:Temp-->
Dont edit this, it will be dinamicaly overwriten with other crap.
<!--E:Temp-->









<!--S:ListGroupAjax-->
									{DATA}
<!--E:ListGroupAjax-->


<!--S:ListGroup-->

					<div class="widget">
						<div class="widget-head">								
							<h3><span class="sign icon-list_nested"></span>{SUBTITLE}</h3>							
							{HEADER_BUTTONS}
						</div>


							<input type="hidden" value="{SELF.URI.AJAX.REORDER-RECORDS}" id="forms-reorder-link"/>

							<img src="images/spacer.gif" height="4" width="0"/>
							<table cellspacing="0" cellpadding="0" border="0" width="100%">
								<tr>
									<td class="FormInnerBorderList">
										{_PRE_TABS}
										{_HTML_PRE}
										{PRE}
										{_HEADER}
										<table id="collapse_{COLLAPSE_ID}" width="100%" cellspacing="0" cellpadding="0" border="0">
											<tr>
												<td class="FormInnerBorderListElements">
													<table id="{ORDER_ID}" border="0" width="100%" cellpadding="3" cellspacing="0" class="table sortable">
														<thead>
															{_TITLES}
														</thead>
														<tbody>
															<input type="hidden" id="x" value="xx"/>
															{DATA}
														</tbody>
														<tfoot>
															{MORE_RECORDS}								
															{PAGING}
														</tfoot>
													</table>	
												</td>
											</tr>
										</table>
										{COLLAPSE_INIT}
										{EXTRA}
										{AFTER}
										{_HTML_AFTER}
									</td>
								</tr>
							</table>

					</div>

<!--E:ListGroup-->

<!--S:ListMoreRecords-->
									<tr>
										<td class="OXB-form-load-more" colspan="{COLS_COUNT}"><div id="OXB-load-more">
											<input type="hidden" name="ajax.load.more.page" value="1"/>
											<input type="hidden" name="ajax.load.more.url" value="{AJAX_LINK}"/>
										<a href="javascript:void(0);">Load More Records</a></div></td>
									</tr>
<!--E:ListMoreRecords-->


<!--S:ListCollapse--><img onclick="javascript:XMLFormColapseList('{ID}','{COOKIE}')" style="cursor:pointer" src="images/common/button_collapse.gif" border="0" id="collapse_button_{ID}"><!--E:ListCollapse-->

<!--S:ListCollapseInit-->
	<script>XMLFormColapseInit('{ID}','{DEFAULT}');</script>
<!--E:ListCollapseInit-->


<!--S:ListHeader-->



<!--E:ListHeader-->

<!--S:ListLink-->
<a href="{LINK}">{TITLE}</a>
<!--E:ListLink-->

<!--S:ListElement-->
Dont edit this, will be generated dinamic from phpcode.
<!--E:ListElement-->

<!--S:ListEmpty-->	
	<tr>
		<td class="FormSimpleListEmpty" colspan=30>No records found.</td> 
	</tr>
<!--E:ListEmpty-->

<!--S:ListCell-->
									<td class="FormSimpleListCell{FIRST}{FINAL}{_ALTERNANCE}{_VALTERNANCE}" width="{WIDTH}" align="{ALIGN}" valign="{VALIGN}">
										{VALUE}
									</td> 
<!--E:ListCell-->

<!--S:ListTitle-->
									<td {WIDTH} nowrap class="FormSimpleListTitle{FIRST}{FINAL}{_VALTERNANCE}"><img width=0 height=0>{TITLE}</td> 
<!--E:ListTitle-->

<!--S:ListTitleLink-->
									<td {WIDTH} nowrap class="FormSimpleListTitle{FIRST}{FINAL}{_VALTERNANCE}">
											<a href="{LINK}">{TITLE}</a><a href="{LINK}">{ORDER}</a>
									</td> 
<!--E:ListTitleLink-->

<!--S:ListTitleLinkOrder-->
<img src="images/order_{ORDER}.gif" border="0"/>
<!--E:ListTitleLinkOrder-->

<!--S:ListRow-->
								<tr class="{CLASS}" id="{ORDER_VALUE}">
									{ROW}
								</tr> 
<!--E:ListRow-->

<!--S:SimpleListMultiple-->
	<label class="checkbox single">
		<input type="checkbox" class="no-uniform" id="{NAME}_multiple_{_COUNT}" name="{FIELD}[{SUBFIELD}]" {CHECKED} value="{VALUE}">
		<span class="sign sign-checkbox-unchecked"></span><span class="sign sign-checkbox-checked"></span>
	</label>
	<input type="hidden" id="{NAME}_multiple_{_COUNT}_hidd" name="{FIELD}_hidden[{SUBFIELD}]" {CHECKED} value="{VALUE}">
<!--E:SimpleListMultiple-->

<!--S:SimpleListMultipleHeader-->
<img onclick="XMLFormSelectAll('{NAME}' , '{START}','{END}');" id="{NAME}_check_button" title="Click here to check/unckeck all." style="cursor: pointer;" src="images/common/button_checked.gif" border="0"/><input type="hidden" id="{NAME}_current" value="0" />
<!--E:SimpleListMultipleHeader-->

<!--S:SimpleListFieldInput-->
	<input style="width:{SIZE}; text-align: {ALIGN}" {ALIGN} class="FormItemTextbox" type="{FIELD-TYPE}" name="{FIELD}[{ID}]{FIELD-SUB}" value="{VALUE}">
<!--E:SimpleListFieldInput-->

<!--S:Main-->
		<tr>
			<td colspan=100 class="FormSimpleListPage">
				<div class="FormSimpleListPageL"><nobr>[Page {CURRENT_PAGE} of {PAGE_COUNT}]</nobr></div>
				<div class="FormSimpleListPageR">{PAGES}</div>				
			</td>
		</tr>
<!--E:Main-->

<!--S:Temp-->
DO not edit, used for building other templates
<!--E:Temp-->


<!--S:PagingMain-->
	<tr>
		<td colspan="1000" class="FormPaging">		
		{DATA}
		{JUMP}
		</td>
<!--E:PagingMain-->

<!--S:PagingBack--><a href="{URL}">&laquo; previous</a> <!--E:PagingBack-->
<!--S:PagingBackDisabled-->  <!--E:PagingBackDisabled-->

<!--S:PagingNext--><a href="{URL}">next &raquo;</a> <!--E:PagingNext-->
<!--S:PagingNextDisabled--> <!--E:PagingNextDisabled-->

<!--S:PagingPage--><a href="{URL}">{PAGE}</a> <!--E:PagingPage-->
<!--S:PagingPageCurrent--><b>{PAGE}</b> <!--E:PagingPageCurrent-->
<!--S:PagingDots--> ... <!--E:PagingDots-->
<!--S:PagingJump-->
	Page: <input id="paging_nr" type="textbox" size="3" /> <input type="button" value="Go!" onclick="window.location= str_replace('{PAGE}' , document.getElementById('paging_nr').value,'{URL}')"/>
<!--E:PagingJump-->


#deprecated
<!--S:Page-->
<a href="{BASE}page={PAGE}">{FACE}</a> 
<!--E:Page-->

<!--S:PageActive-->
<b>{FACE}</b>
<!--E:PageActive-->

<!--S:Prev-->
<b>Back</b>
<!--E:Prev-->

<!--S:Next-->
<b>Next</b>
<!--E:Next-->







#DEPRECATED
<!--S:ButtonsCell-->
	<td class="FormSimpleListButtons" width="1">
		<table cellspacing=0 cellpadding=0>
			<tr>				
				{BUTTONS}
			</tr>
		</table>
	</td> 
<!--E:ButtonsCell-->


#DEPRECATED
<!--S:DeleteItem-->
<script> draw_box("300",1,"{TITLE}");</script>
	<table width="300">
		<tr><td style="padding:20px">{DESCRIPTION}</tr></td>
		<tr>
			<td class="border-t" align=center>
				<br><script>draw_button("no" , "{CANCEL_LOCATION}" , "");</script>
				<script>draw_button("yes" , "{DELETE_LOCATION}" , "");</script>
				<br><br>
			</td>
	</table>
<script> draw_box("200",2,"{TITLE}");</script>
<!--E:DeleteItem-->

#DEPRECATED
<!--S:SearchField-->
<input type="hidden" name="{NAME}" value="{VALUE}">
<!--E:SearchField-->


#DEPRECATED
<!--S:SearchForm-->
	<table cellspacing=0 cellpadding=0>
		<form action="{ACTION}" method="get" name="search">
		{FIELDS}
		<tr>
			<!--<td>Search in:&nbsp;</td>-->
			<td>{DROPLIST}</td>			
			<!--<td>&nbsp;for&nbsp;</td>-->
			<td><input type="text" name="search" size=10 value="{VALUE}"></td>			
			<td>&nbsp;</td>
			<!--<td><script>draw_button("search" , "javascript:document.search.submit()" , "");</script></td>-->
		</tr>
		</form>
	</table>
<!--E:SearchForm-->
















################### multiboxes

<!--S:BoxEndWidget-->
						</div>
					</div>
<!--E:BoxEndWidget-->

<!--S:BoxRowStart-->
				<div class="row">
<!--E:BoxRowStart-->

<!--S:BoxRowEnd-->
				</div>
<!--E:BoxRowEnd-->


<!--S:Box-->
					<div class="col-md-{SIZE} col-sm-12 col-xs-12">
						<div class="widget {SKIN} {COLLAPSED}" id="widget_{ID}">
							<div class="widget-head">								
								<h3><span class="sign icon-list_nested"></span>{TITLE}</h3>							
							</div>
							<div class="widget-form">
							{CONTENT}
							</div>
						</div>
					</div>
<!--E:Box-->




######################## languages

<!--S:LangsGroup-->
	<div class="FormLanguage">
		<ul>
			<li class="title">Select Language:</li>
			{DATA}

			<!--
			<li class="title" style="margin-left: 30px;">Copy Data From:</li>
			<li class="title">
				<select class="select">
					<option>[select]</option>
					<option>English</option>
					<option>Arabian</option>
					<option>French</option>
				</select>
			</li>-->
		</ul>
	</div>
<!--E:LangsGroup-->

<!--S:LangsElement-->
			<li>
				{BUTTON}
			</li>
<!--E:LangsElement-->

<!--S:LangsEdit-->
				<button type="submit" class="lang-selector {SELECTED}" name="redir_lang_id" value="{ID}" >
					<span class="lang-flag lang-flag-top">{CODE}</span>
					<span class="lang-name">{TITLE}</span>
				</button>
<!--E:LangsEdit-->

<!--S:LangsDetails-->
				<a href="{DETAILS_LINK}" class="lang-selector {SELECTED}" name="redir_lang_id" value="{ID}">
					<span class="lang-flag lang-flag-top">{CODE}</span>
					<span class="lang-name">{TITLE}</span>
				</a>
<!--E:LangsDetails-->

<!--S:LangsSelected-->selected<!--E:LangsSelected-->

<!--S:LangsTitle--><span class="lang-flag">{CODE}</span><!--E:LangsTitle-->
<span class="lang flag flag-{CODE}" style="margin-right: 5px; position: relative;top: 1px;"></span>